<template>
  <ul>
    <li class="regionInfoItem">
      <div class="d-inline-block"><i class="iconfont icon-ecc mr-2"></i><label>{{regionData.EccCount||region.Ecc.Count}}</label></div>
      <div class="d-inline-block float-right subItem">
        <label style="vertical-align: middle;text-align: center;">
          <i class="iconfont icon-true mr-0 font14" style="color:#81D862;"></i>
          <span class="txt_blue d-block" style="transform: scale(0.5)">在线</span>
        </label>
        <label>在线数：{{regionData.EccCount||region.Ecc.OnLine}}</label>
      </div>
      <!--            <div class="d-inline-block ml-1"><i class="iconfont iconfalse iconfalse text-danger mr-1" style="line-height: 20px;"></i><label>{{region.Ecc.OffLine}}</label></div>-->
      <!--            <div class="d-inline-block ml-1"><i class="iconfont icon-waring mr-1" style="line-height: 20px;"></i><label>{{region.Ecc.Alarm}}</label></div>-->
    </li>
    <li class="regionInfoItem">
      <div class="d-inline-block"><i class="iconfont icon-controller"></i><label>{{regionData.PoleCount||region.Pole.Count}}</label></div>
     <!-- <div class="d-inline-block float-right subItem">
        <label>实时功率数：0</label>
      </div>-->
    </li>
    <li class="regionInfoItem">
      <div class="d-inline-block">
        <i class="iconfont icon-dengyuan"></i><label>{{regionData.BulbCount||region.BulbCount}}</label>
      </div>
      <div class="d-inline-block float-right subItem"><label>光源总数</label></div>
    </li>
    <li class="regionInfoItem" style="justify-content: flex-start">
      <div  style="width: 100%;">
        <div class="d-inline-block ml-0 subItem">
          <label style="vertical-align: middle;text-align: center;">
            <i class="iconfont icon-on mr-0 font14"  style="width: 18px;height: 20px;"></i>
            <span class="txt_blue d-block" style="transform: scale(0.5)">开灯</span>
          </label>
          <label class="font14" style="color: #A8A5EC;font-weight: bold;">{{region.Pole.OnCount||0}}</label>
        </div>
        <div class="d-inline-block ml-1 subItem">
          <label style="vertical-align: middle;text-align: center;">
            <i class="iconfont icon-off mr-0 font14" style="width: 16px;height: 20px;"></i>
            <span class="txt_blue d-block" style="transform: scale(0.5)">关灯</span>
          </label>
          <label class="font14" style="color: #A8A5EC;font-weight: bold;">
<!--            -region.Pole.OnCount-region.Pole.Alarm-->
            <template v-if="regionData.PoleCount">
              <span v-if="regionData.PoleCount>(Number([region.Pole.OnCount])+Number([region.Pole.Alarm]))">
                {{regionData.PoleCount-Number([region.Pole.OnCount])-Number([region.Pole.Alarm])}}
              </span>
              <span v-else>{{regionData.PoleCount}}</span>
            </template>
            <template v-else>{{region.Pole.OffCount}}</template>
          </label>
        </div>
        <div class="d-inline-block ml-1 subItem">
          <label style="vertical-align: middle;text-align: center;">
            <i class="iconfont icon-waring mr-0 font14" style="width: 20px;height: 20px;"></i>
            <span class="txt_blue d-block" style="transform: scale(0.5)">告警</span>
          </label>
          <label class="font14" style="color: #A8A5EC;font-weight: bold;">{{region.Pole.Alarm||0}}</label>
        </div>
      </div>
    </li>
    <li class="regionInfoItem mb-0">
      <div class="d-inline-block">
        <i class="iconfont icon-function"></i><label>{{region.Meter485||0}}</label>
      </div>
      <div class="d-inline-block float-right subItem"><label>工单执行数量</label></div>
    </li>
  </ul>
</template>

<script>

  export default {
    components: {},
    props: {
      region:{},
      regionData:{
        type:Object,
        default:function(){
          return {EccCount:0,PoleCount:0,BulbCount:0}
        }
      }
    },
    data() {
      return {
      }
    },
    watch: {
    },
    computed: {},
    methods: {},
    created() {
    },
    mounted() {
    }
  }
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
</style>
